<template>
	<view class="page_view">
		<view class="detail_title">
			{{ info.title }}
		</view>
		<view class="detail_item">
			<view class="detail_title_info_title">任务详情</view>
			<view class="detail_title_info_desc">
				<rich-text :nodes="info.content"></rich-text>
			</view>
		</view>
		<view class="detail_item">
			<view class="detail_title_info_title">发布日期</view>
			<view class="detail_title_info_desc">
				{{ info.mission.start_time }}
			</view>
		</view>
		<view class="detail_item">
			<view class="detail_title_info_title">任务有效期</view>
			<view class="detail_title_info_desc">
				{{ info.mission.expired_at }}
			</view>
		</view>
		<!-- -->
		<view v-if="type == 'my' && (stuts == 0 || stuts == 3)" class="detail_item">
			<view class="detail_title_info_title">
				上传文件
			</view>
			<view v-for="(item,index) in filePathText" class="detail_title_info_desc"
				style="color: blue;word-break: break-all;">
				<text @click="yulan(item)" style="text-decoration: underline;margin-right: 20rpx;">{{item}}</text>
				<text @click="yulan(item)" style="text-decoration: underline;margin-right: 20rpx;">查看</text>
				<text @click="del(item,index)" style="text-decoration: underline;margin-right: 20rpx;">删除</text>
			</view>
			<view class="detail_title_info_desc" style="color: blue;word-break: break-all;">
				<text @click="Complete_task">选择文件</text>
			</view>
		</view>
		<view class="detail_item">
			<view class="detail_title_info_title">任务入口</view>
			<view class="detail_title_info_desc" style="font-size: 32rpx;color: #0165FB;">
				去答题
			</view>
		</view>
		<view class="bottom flex">
			<view class="bottom_left">
				<text class="bottom_left_desc">奖励金额</text>
				<text class="fuhao">¥</text>
				{{ info.price }}
			</view>
			<view class="bottom_btn" @click="missionaccept_click"
				v-if="type == 'dating' && stuts == 0 &&info.accepted!=1">领取任务</view>
			<view class="bottom_btn bottom_my" @click="wancheng" v-if="type == 'my' && stuts == 0">完成任务</view>
			<view class="bottom_btn bottom_my" @click="wancheng" v-if="type == 'my' && stuts == 3">重新提交</view>
			<!-- @click="Complete_task" -->
			<view class="bottom_btn bottom_wancheng" v-if="type == 'my' && stuts == 1">已完成</view>
			<view class="bottom_btn bottom_wancheng" v-if="type == 'my' && stuts == 2">已过期</view>
			<view class="bottom_btn bottom_wancheng" v-if="type == 'my' && stuts == 4">审核中</view>
		</view>
		<u-popup :show="show" @close="close" :safeAreaInsetBottom="false" mode="center" :closeable="true"
			closeIconPos="top-right" round="14">
			<view class="tc_view">
				<view class="tc_view_border" @click="complete">
					<image src="https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/up_border.png"
						class="tc_view_border_img" mode=""></image>
					<image
						:src="up_file ? file_type_img : 'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/up_choose.png'"
						class="tc_view_border_jia" mode=""></image>
				</view>
			</view>
		</u-popup>
		<view v-if="showPross" class="" style="width: 100vw;height: 100vh;position: fixed;top: 0;display: flex;align-items: center;justify-content: center;background: rgba(0, 0, 0, .3);z-index: 999;left: 0;">
			<view class="" style="width: 702rpx;height: 300rpx;flex-direction: column; display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 24rpx;">
				<view class="" style="margin-bottom: 30rpx;">
					文件{{temFileListIndex+1}}上传进度
				</view>
				<view class="" style="position: relative;width: 680rpx;height: 20rpx;background: #f2f2f2;border-radius: 10rpx;">
					<view class="" style="height: 20rpx;background: green;border-radius: 10rpx;" :style="'width:'+prossNum+'%'">
						
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userinfo
	} from '@/api/login.js'
	import {
		missiondetail,
		missionaccept,
		missionsubmit
	} from '@/api/common.js';
	import uploadImage from '@/common/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				content: '',
				info: '',
				type: '',
				show: false,
				up_file: '',
				file_type_img: '',
				stuts: '',
				filePathText: [],
				id: '',
				ImgUrl: this.$ImgUrl,
				userinfo: null,
				// 上传进度
				showPross:false,
				prossNum:0,
				temFileList:[],//临时文件列表
				temFileListIndex:0,
			};
		},
		onLoad(options) {
			// let type = 'MP4';
			// console.log(type.toLowerCase());
			this.id = options.id;
			this.type = options.type;
			this.stuts = options.stuts;
			this.getinfo();
			this.getuserinfo()
		},
		methods: {
			getuserinfo() {
				let t = this
				userinfo().then(res => {
					if (res.code == 200001) {
						let data = res.data
						t.userinfo = res.data
						if (t.userinfo.gender == 0) {
							t.userinfo.sex = '女'
						} else {
							t.userinfo.sex = '男'
						}
					}
				}).catch(res => {
					t.userinfo = '';
				})
			},
			del(item, index) {
				this.filePathText.splice(index, 1);
			},
			yulan(item) {
				let url = this.ImgUrl + item;
				console.log(url, 'cs');
				uni.downloadFile({
					url,
					success: res => {
						if (res.statusCode === 200) {
							let fileType = res.tempFilePath.split('.')[1];
							let list = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp'];
							if (list.indexOf(fileType.toLowerCase()) != -1) {
								uni.previewImage({
									urls: [res.tempFilePath],
									showmenu: false,
									longPressActions: {
										itemList: ['发送给朋友', '保存图片', '收藏'],
										success: function(data) {
											console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (
												data.index + 1) + '张图片');
										},
										fail: function(err) {
											console.log(err.errMsg);
										}
									}
								});
							}
							// let list1 = ['pdf','doc','docx','xls','xlsx'];
							let list1 = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
							if (list1.indexOf(fileType.toLowerCase()) != -1) {
								uni.openDocument({
									filePath: res.tempFilePath,
									// showMenu: true,
									success: function(res) {
										console.log('打开文档成功');
									}
								});
							}
							let list2 = ['mp4', 'm2v', 'mkv'];
							if (list2.indexOf(fileType.toLowerCase()) != -1) {
								uni.setStorageSync('videoSrc',res.tempFilePath);
								uni.navigateTo({
									url:'/pages/TaskDetails/video/video'
								})
							}
						}
					}
				});
			},
			wancheng() {
				if (this.filePathText.length == 0) {
					uni.showToast({
						title: '请选择文件',
						icon: 'none'
					})
					return;
				}
				let t = this;
				uni.showModal({
					title: '提示',
					content: '是否确认提交',
					success: res2 => {
						if (res2.confirm) {
							missionsubmit({
								id: t.id,
								file: JSON.stringify(t.filePathText)
							}).then(res => {
								console.log(res)
								if (res.code == 200001) {
									uni.showToast({
										title: '文件上传成功',
										icon: 'none'
									})
									t.show = false
									setTimeout(() => {
										uni.navigateBack()
									}, 1500)
								} else {
									uni.showToast({
										title: res.message,
										icon: 'none'
									})
								}
							})
						}
					}
				})

			},
			getinfo() {
				let t = this;
				missiondetail({
					id: t.id
				}).then((res) => {
					console.log(res);
					if (res.code == 200001) {
						t.info = res.data;
					}
				});
			},
			missionaccept_click() {
				let t = this;
				missionaccept({
					id: t.id
				}).then((res) => {
					console.log(res);
					if (res.code == 200001) {
						uni.showToast({
							title: '领取成功',
							icon: 'none'
						});
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/MyTasks/MyTasks'
							});
						}, 1500);
					}
				});
			},
			Complete_task() {
				if (this.type == 'my' && this.stuts == 1) {
					return
				}
				this.show = true;
			},
			close() {
				this.show = false;
			},
			getPross(e){
				console.log(e,'cs');
				this.showPross = true;
				this.prossNum = e.progress;
				if(this.prossNum==100){
					this.prossNum = 0;
					if((this.temFileListIndex+1)<this.temFileList.length){
						this.temFileListIndex++;
						this.upload();
					}else{
						this.showPross = false;
					}
				}
			},
			upload(){
				let t = this;
				uploadImage(this.temFileList[this.temFileListIndex].filePath,this.temFileList[this.temFileListIndex].fileName, 'wechat/', (res) => {
					console.log(res);
					t.filePathText.push(res.imgName);
				},err=>{
					
				},t.getPross);
			},
			complete() {
				let t = this;
				uni.chooseMessageFile({
					count: 9,
					type: 'all',
					success(res) {
						console.log(res,'cs');
						let tem = [];
						for(let i=0;i<res.tempFiles.length;i++){
							t.up_file = res.tempFiles[i];
							let lastindex = t.up_file.path.lastIndexOf('.');
							let type = t.up_file.path.substring(lastindex+1, t.up_file.path.length);
							console.log(type,'cs');
							let list = ['png', 'jpg', 'jpeg', 'bmp', 'gif', 'webp'];
							// let list1 = ['pdf','doc','docx','xls','xlsx'];
							let list1 = ['doc', 'xls', 'ppt', 'pdf', 'docx', 'xlsx', 'pptx'];
							let list2 = ['mp4', 'm2v', 'mkv'];
							let nlist = [...list, ...list1, ...list2];
							if (nlist.indexOf(type.toLowerCase()) == -1) {
								uni.showToast({
									title: '文件不合法',
									icon: 'none'
								});
								return false;
							}
							if (list.indexOf(type.toLowerCase()) != -1) {
								t.file_type_img =
									'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/img.png';
							}
							if (list1.indexOf(type.toLowerCase()) != -1) {
								t.file_type_img =
									'https://bucketoss10086.oss-cn-beijing.aliyuncs.com/miniprogram/pdf.png';
							}
							t.show = false;
							let obj = {
								fileName:t.userinfo.name + (Date.parse(new Date())+i)+'.'+type,
								filePath:t.up_file.path,
							}
							tem.push(obj);
						}
						t.temFileList = tem
						t.upload();
					},
					fail(res) {
						console.log(res);
					}
				});
			}
		}
	};
</script>

<style>
	page {
		background-color: #fff;
	}

	.page_view {
		padding: 30rpx;
		box-sizing: border-box;
		padding-bottom: 160rpx;
	}

	.detail_item {
		margin-top: 60rpx;
	}

	.detail_title_info_title {
		color: #999;
		font-family: Alibaba PuHuiTi 2;
		font-size: 28rpx;
		font-weight: 400;
	}

	.detail_title_info_img {
		width: 690rpx;
		height: 300rpx;
		border-radius: 8rpx;
		background: #d9d9d9;
		margin-top: 30rpx;
	}

	.detail_title_info_desc {
		margin-top: 30rpx;
		color: #444;
		font-family: Alibaba PuHuiTi 2;
		font-size: 32rpx;
		font-weight: 400;
	}

	.bottom {
		width: 100%;
		height: 140rpx;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
		border-top: 1rpx solid #f4f4f4;
	}

	.bottom_btn {
		width: 280rpx;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 45rpx;
		background: #0165fb;
		color: #fff;
		text-align: center;
		font-family: Alibaba PuHuiTi 2;
		font-size: 30rpx;
		font-weight: 400;
	}

	.bottom_left {
		color: #e5432e;
		font-family: Alibaba PuHuiTi 2;
		font-size: 40rpx;
		font-weight: 700;
	}

	.bottom_left_desc {
		color: #999;
		font-family: Alibaba PuHuiTi 2;
		font-size: 28rpx;
		font-weight: 400;
		margin-right: 16rpx;
	}

	.fuhao {
		font-size: 28rpx;
	}

	.bottom_my {
		background: #ff9d43;
	}

	.tc_view {
		width: 478rpx;
		height: 604rpx;
		border-radius: 28rpx;
		background: #fff;
		position: relative;
	}

	.tc_view_border {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 284rpx;
		height: 284rpx;
	}

	.tc_view_border_img {
		width: 100%;
		height: 100%;
	}

	.tc_view_border_jia {
		width: 80rpx;
		height: 80rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.bottom_wancheng {
		background: #ccc;
		color: #fff;
	}
</style>